import React, { FC, useEffect, useState } from "react";
import styles from "./index.module.scss";
// import { useParams } from "react-router-dom";
// import { getQuestions } from "../../../utils/api";
import { Button, Result, Spin } from "antd";
import { useTitle } from "ahooks";
import useLoadingQuestionData from "../../../hooks/useLoadingQuestionData.ts";
import useGetPageInfo from "../../../hooks/useGetPageInfo.ts";
import { useNavigate } from "react-router-dom";
import StatHeader from "./StatHeader.tsx";
import StatLeft from "./StatLeft.tsx";
import StatPageList from "./StatPageList.tsx";
import StatChart from "./StatRight";

const Edit: FC = () => {
  const nav = useNavigate();
  const { loading } = useLoadingQuestionData();
  const { isPublished, title } = useGetPageInfo();
  useTitle(`问卷统计 - ${title}`);

  //状态提升
  const [selectedComponentId, setSelectedComponentId] = useState("");
  const [selectedComponentType, setSelectedComponentType] = useState("");
  const LoadingEle = (
    <div style={{ textAlign: "center", marginTop: "20%" }}>
      <Spin />
    </div>
  );
  const genContentEle = () => {
    if (typeof isPublished === "boolean" && !isPublished) {
      return (
        <div style={{ flex: "1" }}>
          <Result
            status="warning"
            title="该页面尚未发布"
            extra={
              <Button type="primary" onClick={() => nav(-1)}>
                返回上一页
              </Button>
            }
          ></Result>
        </div>
      );
    }
    return (
      <>
        <div className={styles.left}>
          <StatLeft
            selectedComponentId={selectedComponentId}
            setSelectedComponentId={setSelectedComponentId}
            setSelectedComponentType={setSelectedComponentType}
            selectedComponentType={selectedComponentType}

          />
        </div>
        <div className={styles.main}>
          <StatPageList
            selectedComponentId={selectedComponentId}
            setSelectedComponentId={setSelectedComponentId}
            setSelectedComponentType={setSelectedComponentType}
            selectedComponentType={selectedComponentType}
          />
        </div>
        <div className={styles.right}>
          <StatChart
            selectedComponentId={selectedComponentId}
            setSelectedComponentId={setSelectedComponentId}
            setSelectedComponentType={setSelectedComponentType}
            selectedComponentType={selectedComponentType}
          />
        </div>
      </>
    );
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <StatHeader />
      </div>
      <div className={styles["content_wrapper"]}>
        {loading && LoadingEle}

        {!loading && <div className={styles.content}>{genContentEle()}</div>}
      </div>
    </div>
  );
};
export default Edit;
